<!-- 模板 -->
<div class="layui-fluid">
  <div class="layui-row">
    <div class="layui-col-xs12">
      <div class="layui-card">
        <div class="layui-card-header">拦截器(Mockjs)</div>
        <div class="layui-card-body">
          该组件主要用于拦截AJAX请求，返回模拟数据。
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">示例</div>
        <div class="layui-card-body">
          <form class="layui-form">
            <div>
              <div class="layui-row layui-col-space10">
                <div class="layui-col-sm6">
                  <div class="layui-form-item">
                    <label class="layui-form-label">APIs</label>
                    <div class="layui-input-block">
                      <select name="apis" lay-verify="required">
                        <option value=""></option>
                        <option value="get /api/getuserinfo">获取用户信息(/api/getuserinfo)</option>
                        <option value="post /api/getlist">获取数据列表(/api/getlist)</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="layui-col-sm6">
                  <a href="javascript:;" class="layui-btn" id="sendRequest">发起请求</a>
                </div>
              </div>
            </div>
          </form>
          <div class="layui-card">
            <div class="layui-card-header">响应信息(请选择一个APIs，然后点击发起请求按钮.)</div>
            <div class="layui-card-body" id="response" style="text-align: left;">
              <p>暂无数据.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">用法介绍</div>
        <div class="layui-card-body">
          <pre class="layui-code">
layui.config({ 
  base: '/src/js/' 
}).use('mockjs',function(){
  var APIConfigs = {
    'GET /api/getuserinfo': {
      id: 1,
      name: '@name',
      email: '@email',
      address: '@region',
      datetime: '@datetime'
    },
    'POST /api/getlist': {
      'list|10': [{
        'id|+1': 1,
        name: '@name',
        email: '@email',
        datetime: '@datetime',
        address: '@region',
      }]
    },
  };
  // 注入mock
  layui.mockjs.inject(APIConfigs);
});
          </pre>
          <blockquote class="layui-elem-quote">
            具体的配置方式请参考官方的文档：
            <a href="https://github.com/nuysoft/Mock/wiki/Getting-Started" target="_blank">
              https://github.com/nuysoft/Mock/wiki/Getting-Started
            </a>
          </blockquote>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">方法(Method)</div>
        <div class="layui-card-body">
          <table class="layui-table">
            <colgroup>
              <col width="150">
              <col width="320">
              <col width="150">
              <col>
            </colgroup>
            <thead>
              <tr>
                <th>名称</th>
                <th>参数</th>
                <th>用法</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  inject
                </td>
                <td>
                  <p>{Object} config</p>
                </td>
                <td>mockjs.inject(config)</td>
                <td>
                  注入需要拦截的APIs, config 参考 用法介绍 中的 APIConfigs
                </td>
              </tr>
            </tbody>
          </table>

          <blockquote class="layui-elem-quote">
            具体的配置方式请参考官方的文档：
            <a href="https://github.com/nuysoft/Mock/wiki/Getting-Started" target="_blank">
              https://github.com/nuysoft/Mock/wiki/Getting-Started
            </a>
          </blockquote>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">结语(End)</div>
        <div class="layui-card-body">
          <blockquote class="layui-elem-quote">
            <p>这篇使用说明文档到这里也就结束了，大家有什么看不懂的或者有什么疑问的，加群问吧。PS:多思考，多动手，进步的可以看得见的</p>
            <br/>
            <p>Author：Van Zheng</p>
            <p> Date：2018-01-16</p>
          </blockquote>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  layui.config({
    base: '/src/js/'
  }).use(['layer', 'mockjs', 'form'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      form = layui.form;
    form.render();

    var APIConfigs = {
      'GET /api/getuserinfo': {
        id: 1,
        name: '@name',
        email: '@email',
        address: '@region',
        datetime: '@datetime'
      },
      'POST /api/getlist': {
        'list|10': [{
          'id|+1': 1,
          name: '@name',
          email: '@email',
          datetime: '@datetime',
          address: '@region',
        }]
      },
    };
    // 注入mock
    layui.mockjs.inject(APIConfigs);

    $('#sendRequest').on('click', function () {
      var apiValue = $('select[name=apis]').val();
      if (apiValue === '') {
        layer.msg('请选择一个APIs');
      } else {
        var d = apiValue.split(' ');
        var method = d[0];
        var url = d[1];
        $.ajax({
          url: url,
          type: method,
          success: function (res) {
            $('#response').html('<pre class="layui-code">' + res + '</pre>');
          }
        });
      }
    });
  });
</script>
<style>
</style>